import React, {FC, useEffect, useRef} from "react";
import {inject, observer} from "_mobx-react@6.3.1@mobx-react";
import * as echarts from "_echarts@5.3.2@echarts";
import BreadcrumbPath from "../../../components/BreadcrumbPath";


const ProjectData: FC<any> = ({MobxData}) => {
    const dataContent = useRef<any>();

    const {projectList, getProjectList} = MobxData

    useEffect(() => {
        // 获取项目列表
        getProjectList()
    }, [])


    useEffect(() => {

        // 组装图表数据
        let picture: Array<any> = [
            {value: 0, name: '优秀'},
            {value: 0, name: '良好'},
            {value: 0, name: '及格'},
            {value: 0, name: '不及格'},
            {value: 0, name: '未评分'},
        ]


        const addItem = (name: String) => {
            picture.map((values: { value: number, name: String }) => {
                if (values.name === name) {
                    values.value++
                }
            })
        }

        projectList.forEach((item: { score: string | Number }) => {
            if (item.score >= 90 && item.score <= 100) {
                addItem('优秀')
            } else if (item.score >= 70 && item.score < 90) {
                addItem('良好')
            } else if (item.score >= 60 && item.score < 70) {
                addItem('及格')
            } else if (item.score >= 0 && item.score < 60) {
                addItem('不及格')
            } else {
                addItem('未评分')
            }

        })

        // 写入数据
        let graphData = {
            title: {
                text: '成绩分布图',
                left: 'center'
            },
            tooltip: {
                trigger: 'item'
            },
            legend: {
                orient: 'vertical',
                left: 'left'
            },
            series: [
                {
                    type: 'pie',
                    radius: '50%',
                    data: picture,
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                },
            ]
        };
        // 绘制折线图
        graphData.series && echarts.init(dataContent.current).setOption(graphData);
    }, [projectList])

    return (
        <div style={{width: "100%"}}>
            {/*<h1>项目数据</h1>*/}
            <BreadcrumbPath/>
            <div ref={dataContent} style={{width: "100%", height: "600px"}}></div>
        </div>
    )
}
export default inject('MobxData')(observer(ProjectData));